<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/header.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/jquery.jdigiclock.css" />
	<style type="text/css">
	.round {
		height: 49px;
		line-height:49px;
	    border: 1px solid #0050FF;
	    background: #0050FF;
	    color:white;
	    -moz-border-radius: 10px;  
	    -webkit-border-radius: 10px;
	    font-size: 150%;
	    margin-right:20px;
	}  
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	
	<div class="row" style="margin-top:80px">
		<div class="col-xs-12 col-md-8 col-md-offset-2">
			<div id="popularStocks" class="marquee-with-options">滚动条</div>
		</div>
	</div>
	
	<H2 style="text-align:center">Guhappy <pan id="contest_type">3-days</pan> Contests</H2>
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-md-offset-4"  align="center">
				<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Days&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hours&nbsp;&nbsp;&nbsp;&nbsp;Minutes</h3>
				<div id="digiclock" align="center">
					<div id="clock"></div>;
				</div>
			</div>
			<div class="col-md-2" style="top:80px">
				<h3>Left</h3>
			</div>
		</div>
		<div class="row" style="margin-top:20px">
			<div class="col-md-1">
				<img id="bull_img" src="./images/bull.PNG" />
				<img id="bear_img" src="./images/bear.PNG" />
			</div>
			<div class="col-md-2 round">
				Total Stock: <span id="total_stock">140</span>
			</div>
			<div class="col-md-3 round">
				Total Participants: <span id="total_participants:">20</span>
			</div>
			<div class="col-md-3 round">
				Total Premium: <span id="total_premium">$5000</span>
			</div>
		</div>
		<div class="row" style="margin-top:20px">
			<div class="col-md-12">
				<h4 id="had_voted">Your Vote In This Contest</h4>
				<h4 id="not_voted">You Didn't Vote In This Contest</h4>
			</div>
		</div>
		<div class="row" style="margin-top:20px">
			<div class="col-md-12" align="center">
				<img src="images/rank.png" />
			</div>
		</div>
	</div>
	<div id="holder" class="container" >
		<div class="row" id="template" style="margin-top:20px">
			<div class="col-md-2" style="text-align:left" >
				<div id="symbol" class="contest_type bull" style="font-size: 180%;">
					text
				</div>
			</div>
			<div id="price" class="col-md-2" style="text-align:right;margin-top:1px;font-size: 150%;" >
				text
			</div>
			<div class="col-md-2">
				<button id="price_change" class="btn btn-green" style="width:100px;">+20%</button>
			</div>
			<div class="col-md-2" style="text-align:left;margin-top:1px;font-size:150%;" >
				Votes: <span id="vote">2</span>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.jdigiclock.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
<script type="text/javascript" src="js/header.js"></script>
<script>
$(function() {
	$('#digiclock').jdigiclock({
		// Configuration goes here
	});
	
	
	$.get("data/contestDetails.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data))	|| $.parseJSON(data);
			if(data.updown=="bull") {
				$("#bear_img").hide();
				$("#bull_img").show();
			}
			else {
				$("#bear_img").show();
				$("#bull_img").hide();
			}
			
			if(data.voted=="true") {
				$("#had_voted").show();
				$("#not_voted").hide();
			}
			else {
				$("#had_voted").hide();
				$("#not_voted").show();
			}
		}
	});
	
	var $mwo = $('.marquee-with-options');
	$.get("data/popular.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var inner = '<span class="popularStock" style="color:';
				var stock = data.stocks[i];
				if(stock.change.indexOf('-') > -1) {
					inner += '#AA1111;">';
				}
				else {
					inner += '#228822;">';
				}
				inner += stock.symbol + ' ' + stock.change + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
				html += inner;
			}
			
			$("#popularStocks").html(function(i,origHtml){
				return html; 
			});
			
			$mwo.marquee();
			
			var showing = false;
			var symbol = "";
			var currentSymbol = "";
			$(".popularStock").click(function(){
			});
		}
	});
});

var stockData;
$(function() {
	var $clone = $('#template').clone();
	var $template;
	$.get("data/contestDetail.json",function(data,status){
		if(status=="success") {
			stockData = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			
			for(var i in stockData.stocks) {
				var stock = stockData.stocks[i];
				if(i > 0) {
					$template = $clone.clone();
					$('#holder').append($template);
				}
				else {
					$template = $('#template');
				}
				var symbol = $template.find("#symbol").html();
				symbol = symbol.replace("text", stock.symbol);
				$template.find("#symbol").html(symbol);
				
				var $button = $template.find("#price_change");
				if( stock.type=="bull" ) {
					$button.removeClass("btn-red");
					$button.addClass("btn-green");
				}
				else {
					$button.removeClass("btn-green");
					$button.addClass("btn-red");
				}
				$button.data("current", "percentage");
				$button.data("change", stock.change);
				$button.data("percentage", stock.percentage);
				$button.click(function() {
					if($(this).data("current") == "percentage") {
						$(this).data("current", "change");
						$(this).text(function(i,origText){
							return $(this).data("change"); 
						});
					}
					else {
						$(this).data("current", "percentage");
						$(this).text(function(i,origText){
							return $(this).data("percentage"); 
						});
					}
				});
				
				var $bull = $template.find("#symbol");
				if( stock.type=="bull" ) {
					$bull.removeClass("bear");
					$bull.addClass("bull");
				}
				else {
					$bull.removeClass("bull");
					$bull.addClass("bear");
				}
				
				$template.find("#price").text(function(i,origText){
					var text = origText.replace("text", stock.price);
					return text; 
				});
				$template.find("#price_change").text(function(i,origText){
					var text = origText.replace("text", stock.percentage);
					return stock.percentage; 
				});
				$template.find("#vote").text(function(i,origText){
					var text = stock.votes;
					return text; 
				});
			}
		}
	});
});
</script>
</html>
